<template>
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="hander(2)" v-if="isCanAudit">审核</a-button>
          <a-button type="primary" @click="hander(3)" v-if="isCanAudit">拒绝</a-button>
          <a-button type="primary" @click="backList">返回</a-button>
        </div>
      </a-col>
      <a-col class="download-btn">
        <div class="top-btns">
          <a-button
            type="primary"
            @click="download($event, 0)"
            icon="download"
            :loading="iconLoading0"
          >下载图片</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="联系信息" key="14">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户id：</p>
            <p>{{detailData.merchant_id}}</p>
          </a-col>
          <a-col :span="8">
            <p>*联系人：</p>
            <p>{{detailData.contact_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*身份证号：</p>
            <p>{{detailData.con_ic_num}}</p>
          </a-col>
          <a-col :span="8">
            <p>邮箱：</p>
            <p>{{detailData.email}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="基础信息" key="0">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户分类：</p>
            <p>{{detailData.category_name + '/' + detailData.tag_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*门店名称：</p>
            <p>{{detailData.shop_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*门店定位：</p>
            <p>{{detailData.location}}</p>
          </a-col>
          <a-col :span="8">
            <p>*所属区域：</p>
            <p>{{detailData.province_name + ' ' + detailData.city_name + ' ' + detailData.district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*详细地址：</p>
            <p>{{detailData.address_detail}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="推荐人信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*推荐人姓名：</p>
            <p>{{detailData.partner_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*推荐人手机号：</p>
            <p>{{detailData.partner_phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="15" class="panel-wrap">
        <template slot="header">收银台信息</template>
        <a-row :gutter="16">
          <a-col :span="24">
            <p>*收银台照片：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.cas_des_photo" alt @click="showImg(detailData.cas_des_photo)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="2" class="panel-wrap">
        <template slot="header">
          门头信息(商家简称需要与门头照片一致)
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,1)"
            icon="download"
            :loading="iconLoading1"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户类型：</p>
            <p>{{merchantType}}</p>
          </a-col>
          <a-col :span="8">
            <p>*商户简称：</p>
            <p>{{detailData.merchant_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>*门头照片：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="headImg" alt @click="showImg(headImg)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="营业信息" key="3">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*营业时间：</p>
            <p>{{detailData.business_start + '--' + detailData.business_end}}</p>
          </a-col>
          <a-col :span="8">
            <p>*人均消费：</p>
            <p>{{detailData.per_consume}}</p>
          </a-col>
          <a-col :span="8">
            <p>*客服电话：</p>
            <p>{{detailData.service_phone}}</p>
          </a-col>
          <a-col :span="8">
            <p>*发行额度：</p>
            <p>{{detailData.amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>*折扣：</p>
            <p>{{detailData.discount}}</p>
          </a-col>
          <!-- <a-col :span="8">
            <p>*是否打造网红：</p>
            <p>{{detailData.is_red === "true" ? '是' : '否'}}</p>
          </a-col>-->
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="4" class="panel-wrap">
        <template slot="header">
          店内照片（需要简洁干净的店内照片，最少5张，最多12张）
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,2)"
            icon="download"
            :loading="iconLoading2"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*店内照片：</p> -->
            <ul class="pic-show">
              <li v-for="item in storePic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)" />
                <!-- <i class="oneline" :title="item.tag_name">{{item.tag_name}}</i> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="5" class="panel-wrap">
        <template slot="header">
          产品照片（需要清晰且完整的产品照片，最少5张，最多12张）
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,3)"
            icon="download"
            :loading="iconLoading3"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*产品照：</p> -->
            <ul class="pic-show">
              <li v-for="item in productPic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)" />
                <!-- <i class="oneline" :title="item.tag_name">{{item.tag_name}}</i> -->
                <!-- <span>价格: {{item.price}}</span> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="6" class="panel-wrap">
        <template slot="header">
          价格表照片（需要清晰且完整的价格表照片，最少1张，最多12张）
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,4)"
            icon="download"
            :loading="iconLoading4"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*价格表照：</p> -->
            <ul class="pic-show">
              <li v-for="item in pricePic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)" />
                <!-- <i class="oneline" :title="item.tag_name">{{item.tag_name}}</i> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="法人信息" key="7">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*法人姓名：</p>
            <p>{{detailData.law_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*身份证：</p>
            <p>{{detailData.law_idno}}</p>
          </a-col>
          <a-col :span="8">
            <p>*证件有效期：</p>
            <p>{{detailData.ic_sta_time + '~' + detailData.ic_end_time}}</p>
          </a-col>
          <a-col :span="24">
            <p>*法人身份证正面照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.leg_ic_pos" alt @click="showImg(detailData.leg_ic_pos)" />
              </li>
            </ul>
          </a-col>
          <a-col :span="24">
            <p>*法人身份证背面照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.leg_ic_bac" alt @click="showImg(detailData.leg_ic_bac)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="8" class="panel-wrap">
        <template slot="header">
          营业执照信息（执照文字需清晰可见且完整，且与名称、类型保持一致）
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,5)"
            icon="download"
            :loading="iconLoading5"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*执照名称：</p>
            <p>{{detailData.store_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*营业执照类型：</p>
            <p>{{buslicType}}</p>
          </a-col>
          <a-col :span="8">
            <p>*营业执照有效期：</p>
            <p v-if="(detailData.bus_sta_time != '') && (detailData.bus_end_time != '')">
              {{detailData.bus_sta_time + '~' + detailData.bus_end_time}}
            </p>
          </a-col>
          <a-col :span="8">
            <p>*营业执照号：</p>
            <p>{{detailData.bus_lic_num}}</p>
          </a-col>
          <a-col :span="8" v-if="isShow && isShowCode">
            <p>*税务登记证号：</p>
            <p>{{detailData.tax_reg_cer}}</p>
          </a-col>
          <a-col :span="8" v-if="isShow && isShowCode">
            <p>*组织机构代码：</p>
            <p>{{detailData.org_code}}</p>
          </a-col>
          <a-col :span="24">
            <p>*营业执照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="license" alt @click="showImg(license)" />
              </li>
            </ul>
            <p></p>
          </a-col>
          <a-col :span="24" v-if="isShow && isShowCode">
            <p>*税务登记证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.tax_reg_photo" alt @click="showImg(detailData.tax_reg_photo)" />
              </li>
            </ul>
            <p></p>
          </a-col>
          <a-col :span="24" v-if="isShow && isShowCode">
            <p>*组织机构代码证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img
                  :src="detailData.org_code_photo"
                  alt
                  @click="showImg(detailData.org_code_photo)"
                />
              </li>
            </ul>
            <p></p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="16" class="panel-wrap" v-if="detailData.merchant_type !== 1">
        <template slot="header">开户许可证(选填,许可证文字需清晰可见且完整)</template>
        <a-row :gutter="16">
          <a-col :span="24">
            <p>开户许可证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.acc_ope_per" alt @click="showImg(detailData.acc_ope_per)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="9" class="panel-wrap">
        <template slot="header">
          经营许可证(选填,许可证文字需清晰可见且完整)
          <a-button
            size="small"
            type="primary"
            class="download"
            @click="download($event,6)"
            icon="download"
            :loading="iconLoading6"
          >下载图片</a-button>
        </template>
        <a-row :gutter="16">
          <a-col :span="24">
            <p>经营许可证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="licensePremit" alt @click="showImg(licensePremit)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="结算信息" key="10">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*账号类型：</p>
            <p>{{bankType}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户名称：</p>
            <p>{{detailData.account_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行：</p>
            <p>{{detailData.bankname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*银行账号：</p>
            <p>{{detailData.bankcard}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行支行：</p>
            <p>{{detailData.branchname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户地区：</p>
            <p>{{detailData.bank_province_name + detailData.bank_city_name + detailData.bank_district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*会员账号：</p>
            <p>{{detailData.member_account}}</p>
          </a-col>
          <div v-if="this.detailData.bank_type == 2">
            <a-col :span="8">
              <p>*结算类型：</p>
              <p>{{settleType}}</p>
            </a-col>
            <a-col :span="24" v-if="isShowSettle">
              <p>*结算人身份证照正面：</p>
              <ul class="pic-show alone-pic">
                <li>
                  <img :src="detailData.set_ic_pos" alt @click="showImg(detailData.set_ic_pos)" />
                </li>
              </ul>
            </a-col>
            <a-col :span="24" v-if="isShowSettle">
              <p>*结算人身份证照背面：</p>
              <ul class="pic-show alone-pic">
                <li>
                  <img :src="detailData.set_ic_bac" alt @click="showImg(detailData.set_ic_bac)" />
                </li>
              </ul>
            </a-col>
            <a-col :span="24" v-if="isShowSettle">
              <p>*法人授权委托书：</p>
              <ul class="pic-show alone-pic">
                <li>
                  <img :src="detailData.leg_aut_ent" alt @click="showImg(detailData.leg_aut_ent)" />
                </li>
              </ul>
            </a-col>
          </div>
          <a-col :span="24" v-if="this.detailData.bank_type == 2">
            <p>*结算卡照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="detailData.settle_card" alt @click="showImg(detailData.settle_card)" />
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="注册信息" key="11">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*手机号码：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="费率信息" key="12">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*行业类别：</p>
            <p>{{detailData.industry_pid_name + '/' + detailData.industry_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*商户结算费率：</p>
            <p>{{detailData.settle_rate}}</p>
          </a-col>
          <a-col :span="8">
            <p>*服务商分润费率：</p>
            <p>{{detailData.commission_rate_pa}}</p>
          </a-col>
          <a-col :span="8">
            <p>*产品交易手续费：</p>
            <p>{{detailData.trade_rate}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="免结算费率信息" key="13">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*是否免结算费率：</p>
            <p>{{detailData.is_use_settle_exemption ? '开启' : '关闭'}}</p>
          </a-col>
          <div v-if="detailData.is_use_settle_exemption">
            <a-col :span="8">
              <p>*免结算费率额度：</p>
              <p>{{detailData.settle_exemption_amount}}</p>
            </a-col>
            <a-col :span="8">
              <p>*免结算费率时间：</p>
              <p>{{detailData.start_at}}</p>
            </a-col>
          </div>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <!-- 提交审核弹窗 -->
    <a-modal
      class="middle-moadal"
      :maskClosable="false"
      :title="auditTitle"
      v-model="visibleA"
      @ok="handleAuditOk"
    >
      <div class="audit-msg">
        <div v-show="isShowRate">
          <a-form-item label="行业类别：">
            <a-cascader
              v-model="createIndustry"
              :fieldNames="fieldNames"
              :options="industryObj"
              @change="onChangeCategory"
              placeholder="请选择行业类别"
            />
          </a-form-item>
          <a-form-item label="*商家结算费率：">
            <a-input-number
              :min="0"
              :max="0.9999"
              :step="0.05"
              :precision="4"
              v-model.trim="settleRate"
              placeholder="请输入商家结算费率"
            />
          </a-form-item>
          <a-form-item label="*服务商分润费率：">
            <a-input-number
              :min="0"
              :max="0.9999"
              :step="0.05"
              :precision="4"
              v-model.trim="commissionRate"
              placeholder="请输入服务商分润费率"
            />
          </a-form-item>
          <a-form-item label="*产品结算费率：">
            <a-input-number
              :min="0"
              :max="0.9999"
              :step="0.05"
              :precision="4"
              v-model.trim="tradeRate"
              placeholder="请输入产品结算费率"
            />
          </a-form-item>
          <a-form-item label="*是否免结算：">
            <a-switch checkedChildren="开" unCheckedChildren="关" @change="handleSwitch" />
          </a-form-item>
          <div v-if="this.freeRate">
            <a-form-item label="*免结算费率额度：">
              <a-input-number
                :min="0"
                :precision="2"
                v-model.trim="freeSettleRate"
                placeholder="请输入免结算费率额度"
              />
              <i style="display: block;line-height: 20px;color: #f00">额度内商家结算时，平台不收结算费</i>
            </a-form-item>
            <a-form-item label="*免结算费率时间：">
              <date :value="rateTime" :status="2" @change="dateRateChange" />
              <i style="display: block;line-height: 20px;color: #f00">时间段内商家结算时，平台不收结算费</i>
            </a-form-item>
            <!--  -->
          </div>
        </div>
        <a-form-item label="*审核备注：">
          <a-textarea
            v-model.trim="remarkTxt"
            placeholder="请输入审核备注"
            :rows="rows"
            :maxlength="maxlength"
          />
        </a-form-item>
      </div>
    </a-modal>
    <!-- 拒绝审核弹窗 -->
    <!-- 图片放大 -->
    <div class="full-screen-wrap" v-show="isShowImg" @click="isShowImg=false">
      <div class="code-img store-img" id="storeImg"></div>
      <!-- <a-button type="primary"><a-icon type="undo" />左转</a-button>
      <a-button type="primary"><a-icon type="redo" />右转</a-button>-->
    </div>
    <back-top />
  </div>
</template>

<script>
import {
  verifyShowDetail,
  downloadImage,
  getIndustry,
  verify
} from "../../store/providerApi.js";
// const btn =z

export default {
  name: "ProviderCashWithdrawalDetail",
  data() {
    return {
      freeRate: false,
      rateTime: [],
      rateStartTime: 0,
      rateEndTime: 0,
      activeKey: [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16"
      ],
      isShowImg: false,
      detailData: {},
      createIndustry: [], // 行业类别
      fieldNames: { label: "name", value: "id", children: "second" },
      industryObj: [],
      settleRate: "",
      freeSettleRate: 300000,
      commissionRate: "",
      tradeRate: "",
      rows: 4,
      maxlength: 60,
      visibleA: false,
      maskClosable: false,
      remarkTxt: "",
      auditTitle: "",
      id: "",
      isShowRate: Boolean,
      license: "",
      licensePremit: "",
      iconLoading0: false,
      iconLoading1: false,
      iconLoading2: false,
      iconLoading3: false,
      iconLoading4: false,
      iconLoading5: false,
      iconLoading6: false,
      headImg: "", // 门头照片
      storePic: [], // 店内照片
      pricePic: [], // 价格表照片
      productPic: [] // 产品照片
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    isCanAudit() {
      if (this.detailData.status === 2) {
        return false;
      } else {
        return true;
      }
    },
    bankType() {
      if (this.detailData.bank_type == 0) {
        return "";
      } else if (this.detailData.bank_type == 1) {
        return "对公账户";
      } else if (this.detailData.bank_type == 2) {
        return "私人账户";
      }
    },
    merchantType() {
      if (this.detailData.merchant_type == 1) {
        return "个体工商户";
      } else if (this.detailData.merchant_type == 2) {
        return "企业";
      } else if (this.detailData.merchant_type == 3) {
        return "政府及事业单位";
      } else if (this.detailData.merchant_type == 4) {
        return "其他组织";
      }
    },
    isShow() {
      if (this.detailData.merchant_type == 2) {
        return true;
      } else {
        return false;
      }
    },
    buslicType() {
      if (this.detailData.bus_lic_type == 1) {
        return "非多证合一";
      } else if (this.detailData.bus_lic_type == 2) {
        return "多证合一";
      } else {
        return "";
      }
    },
    settleType() {
      if (this.detailData.settle_type == 1) {
        return "法人";
      } else if (this.detailData.settle_type == 2) {
        return "非法人";
      } else {
        return "";
      }
    },
    isShowCode() {
      if (this.detailData.bus_lic_type == 1) {
        return true;
      } else {
        return false;
      }
    },
    isShowSettle() {
      if (this.detailData.settle_type == 1) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    // 提交审核
    hander(tab) {
      this.visibleA = true;
      this.tab = tab;
      this.auditTitle = this.tab === 2 ? "确认审核" : "拒绝审核";
      if (this.tab === 2) {
        this.isShowRate = true;
      } else if (this.tab === 3) {
        this.isShowRate = false;
      }
      getIndustry().then(res => {
        this.industryObj = res.data;
      });
    },
    // 是否免结算开关
    handleSwitch(checked) {
      // console.log(checked);
      this.freeRate = checked;
    },
    dateRateChange({ date, start_time, end_time }) {
      this.rateTime = date;
      this.rateStartTime = start_time;
      this.rateEndTime = end_time;
      // console.log(date, start_time, end_time)
    },
    // 选择行业类别
    onChangeCategory(value) {
      console.log(value);
      this.industryId = value[1];
      console.log(this.createIndustry);
    },
    // 拒绝审核
    // 确认审核
    handleAuditOk(tab) {
      var rateDate = {
        id: this.$route.query.id,
        status: this.tab,
        remark: this.remarkTxt
      };
      if (this.tab === 2) {
        (rateDate.industry_id = this.industryId),
          (rateDate.settle_rate = this.settleRate),
          (rateDate.trade_rate = this.tradeRate),
          (rateDate.commission_rate_pa = this.commissionRate);
        rateDate.is_use_settle_exemption = this.freeRate ? 1 : 0;
        if (this.freeRate === false) {
          rateDate.amount = 0;
          rateDate.start_time = 0;
          rateDate.end_time = 0;
        } else {
          rateDate.amount = this.freeSettleRate;
          rateDate.start_time = this.rateStartTime;
          rateDate.end_time = this.rateEndTime;
        }
      }
      verify(rateDate).then(res => {
        this.visibleA = false;
        this.$message.success(res.data.message);
        this.$router.push("/menu/provider/InviteMerchantAuditList");
      });
    },
    // 返回
    backList() {
      this.$router.go(-1);
    },
    // 获取详情数据
    getData() {
      verifyShowDetail({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data;
        this.uuid = res.data.uuid;
        this.storePic = res.data.store_pics;
        this.pricePic = res.data.price_pics;
        this.headImg = res.data.head_img;
        this.productPic = res.data.product_pics;
        this.licensePremit = res.data.license_premit;
        this.license = res.data.license;
        this.isAllComputed = res.data.can_verify;
      });
    },
    // 下载图片
    download(event, type) {
      // this.iconLoading = true
      this[`iconLoading${type}`] = true;
      // debugger
      event.stopPropagation();
      downloadImage({
        id: this.uuid,
        type
      })
        .then(res => {
          if (!res.error) {
            window.location.href = res.data.url;
          }
          this[`iconLoading${type}`] = false;
        })
        .catch(e => {
          this[`iconLoading${type}`] = false;
        });
    },
    // 放大图片查看
    showImg(img) {
      this.isShowImg = true;
      document.getElementById("storeImg").innerHTML = `<img src="${img}">`;
    }
  }
};
</script>

<style scoped>
/* p {
  margin-left: 18%;
} */
</style>
